* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  background: linear-gradient(to top, #537895, #09203f);
}

.effect {
  position: relative;
  width: 320px;
  height: 320px;
  background-color: white;

  border-radius: 50%;
  /* 设置对比度 */
  filter: contrast(10);
}

.bigball {
  width: 100px;
  height: 100px;
  background-color: black;
}

.smalball {
  width: 60px;
  height: 60px;
  background-color: red;
  /* 动画: 名称 时长 infinite无限次播放 */
  animation: ball 3s infinite;
}

.bigball,
.smalball {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  border-radius: 50%;
  /* 设置模糊度，配合上面的contrast来显示圆球的粘性效果 */
  filter: blur(5px);
}

@keyframes ball {
  0%,
  100% {
    left: 50px;
    width: 60px;
    height: 60px;
  }
  4%,
  54% {
    width: 60px;
    height: 60px;
  }
  10%,
  60% {
    width: 50px;
    height: 70px;
  }
  20%,
  70% {
    width: 60px;
    height: 60px;
  }
  34%,
  90% {
    width: 70px;
    height: 50px;
  }
  41% {
    width: 60px;
    height: 60px;
  }
  50% {
    left: 270px;
    width: 60px;
    height: 60px;
  }
}
